<template>
  <div id="checkedRecord">
    <div class="search">
      <el-select v-model="formData.sortWay"
                 style="width: 150px"
                 placeholder="请选择排序方式">
      <el-option
                v-for="item in sortWay"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
      </el-select>
      <el-select v-model="formData.sortMethod"
                 style="width: 150px"
                 placeholder="请选择排序方法">
        <el-option
                v-for="item in sortMethod"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
      </el-select>
      <el-select v-model="formData.role"
                 style="width: 150px"
                 placeholder="请选择查询角色" >
        <el-option
                v-for="item in role"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
      </el-select>
      <el-input placeholder="请输入需要查询的学号"
                style="width: 200px"
                v-model="formData.roleId"/>
      <el-input placeholder="请输入需要查询的学院"
                style="width: 200px"
                v-model="formData.departmentName"/>
      <el-date-picker
              v-model="dateRange"
              type="daterange"
              @change="getDateRange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="request">查询</el-button>
      <el-button type="success" icon="el-icon-download" @click="exportExcel">导出</el-button>
    </div>
    <el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            border
            id="table"
            :row-class-name="tableRowClassName">
      <el-table-column
              prop="recordTime"
              align="center"
              label="打卡时间">
      </el-table-column>
      <el-table-column
              prop="roleId"
              align="center"
              label="学号"
      >
      </el-table-column>
      <el-table-column
              align="center"
              prop="name"
              label="姓名"
      >
      </el-table-column>
      <el-table-column
              align="center"
              prop="role"
              label="角色"
      ></el-table-column>
        <el-table-column
                align="center"
                prop="departmentName"
                label="学院"
        ></el-table-column>
      <el-table-column
              align="center"
              prop="nativePlace"
              label="籍贯"
      ></el-table-column>
      <el-table-column
              align="center"
              prop="phone"
              label="手机号码"
      ></el-table-column>
      <el-table-column
              align="center"
              prop="departmentName"
              label="学院"
      ></el-table-column>
      <el-table-column
              align="center"
              prop="urgentContactPerson"
              label="紧急联系人">
      </el-table-column>
      <el-table-column
              align="center"
              prop="temperature"
              label="体温">
      </el-table-column>
      <el-table-column
              align="center"
              v-if="isShow"
              label="详情">
        <template slot-scope="scope">
          <el-button type="primary" @click="toRecordDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8,10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
  import {format_today2} from "./childCpn/utils";

  export default {
    name: "CheckedRecord",
    data(){
      return{
        pageSize:8,
        currentPage:1,
        tableData:[],
        sortWay:['按体温排序','按时间排序'],
        sortMethod: ['正序','倒序'],
        role :['Teacher','Student'],
        dateRange:'',
        isShow:true,
        formData:{sortWay:'',sortMethod:'',role:'',roleId:'',departmentName:'',startTime:'',endTime:''}
      }
    },
    mounted() {
      this.formData.startTime = format_today2
      this.formData.endTime = format_today2
      this.request()
    },
    methods:{
      request(){
        console.log(this.formData)
        this.$http.post('/epidemic/admin/getUserRecordRange',this.formData)
            .then(res => {
              console.log(res)
              if(res.data.status === 200){
                this.tableData = res.data.data
              }
            })
      },
      tableRowClassName({row, rowIndex}) {
        // if (rowIndex % 2 === 0) {
        //   return 'warning-row';
        // }
        return '';
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      toRecordDetail(record){
        // console.log(record)
        this.$router.push({
          name:'recordDetail',
          params:{
            record:record
          }
        })
      },
      getDateRange(){
        // console.log(this.dateRange)
        this.formData.startTime = this.dateRange[0]
        this.formData.endTime = this.dateRange[1]
        console.log(this.formData)
      },
      exportExcel(){
        let store_currentPage = this.currentPage
        let store_pageSize = this.pageSize
        this.isShow = false

        this.pageSize = 10000
        this.currentPage = 1
        this.$nextTick(function () {
          let time = new Date();
          let month = time.getMonth() + 1
          let name = time.getFullYear() + "" + month + "" + time.getDate();
          let wb = XLSX.utils.table_to_book(document.getElementById("table"));
          let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
          try {
            FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), name+'打卡名单'+'.xlsx')
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          this.pageSize = store_pageSize
          this.currentPage = store_currentPage
          this.isShow = true
          return wbout;
        })
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-table .warning-row {
    background-color: #e9e6f8;
  }
  .block{
    margin-top: 5px;
    float: right;
  }
  .search{
    display: inline-block;
    float: left;
  }
</style>